<template>
  <div class="pagination">
    <div class="all">
      <div @click="toggle(1)">首页</div>
      <div :disabled="pageNo == 1" @click.stop="reduce">
        <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/pagina-left.png" alt="">
      </div>
      <template v-if="screenWidth>576">
        <div
            v-if="startNumAndEndNum.start > 1"
            @click="$emit('getPageNo', 1)"
            :class="{ active: pageNo == 1 }"
        >
          1
        </div>
        <div v-if="startNumAndEndNum.start > 2">···</div>
      </template>

      <!-- 连续的页码 -->
      <div
          v-for="(page, index) in startNumAndEndNum.end" :key="index"
          v-if="page >= startNumAndEndNum.start"
          @click="$emit('getPageNo', page)"
          :class="{ active: pageNo == page }"
      >
        {{ page }}
      </div>

      <template v-if="screenWidth>576">
        <div v-if="startNumAndEndNum.end < totalPage - 1">···</div>
      </template>
      <!--    <div-->
      <!--        v-if="startNumAndEndNum.end < totalPage"-->
      <!--        @click="$emit('getPageNo', totalPage)"-->
      <!--        :class="{ active: pageNo == totalPage }"-->
      <!--    >-->
      <!--      {{ totalPage }}-->
      <!--    </div>-->
      <div
          @click="add"
          :disabled="pageNo == totalPage"
      >
        <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/pagina-right.png" alt="">
      </div>
      <div @click="toggle(totalPage)">末页</div>

      <div >总页数: {{ totalPage }} </div>
    </div>

    <div class="search-input" v-if="screenWidth>576">
      <input type="text" v-model="page">
    </div>
    <div class="tiaozhuan" @click="toggle(page)" v-if="screenWidth>576">跳转</div>

  </div>
</template>

<script>
export default {
  name: "PaginaTion",
  props: ["pageNo", "pageSize", "total", "continues","screenWidth"],
  data(){
    return {
      page:'',

    }
  },
  computed: {
    // *计算总共多少页,也就是最后一页（需要向上取整Math.ceil）
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },

    // *计算出连续页码的起始数字与结束的数字【连续的页码数字：至少是5】
    startNumAndEndNum() {
      const { continues, pageNo, totalPage } = this; // 解构了
      // 先定义两个变量存储起始数字与结束数字
      let start = 0,
          end = 0;
      // *连续页码数字是5【至少5页】，如果出现不正常现象【不够5页，即总页数 < 连续页码5】
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        // 正常现象【连续的页码5，但是你的总页数一定是大于5的】 parseInt()返回一个十进制的整数【一个数字的参数可同Math.floor】
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
        // 把出现不正常的现象【start数字出现0|负数，continues=5，pageNo=1、2的时候】
        if (start < 1) {
          start = 1;
          end = continues;
        }
        // 把出现不正常的现象【end数字大于总页码，continues=5，totalPage=30，pageNo=29、30的时候】
        if (end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return { start, end };
    },
  },
  methods:{
    reduce(){
      if( this.pageNo<=1 ) return;
      this.pageNo--;
      this.$emit('getPageNo', this.pageNo)
    },
    add(){
      if( this.pageNo == this.totalPage ) return;
      this.pageNo++;
      this.$emit('getPageNo', this.pageNo)
      console.log(this.pageNo);
    },
    toggle(val){
      if( val <= 0 ) return;
      this.pageNo = val;
      this.$emit('getPageNo',val)
    },
    taiozhuan(){
      this.pageNo = this.page ;
      this.$emit('getPageNo',this.pageNo)
    },
  }
};
</script>

<style lang="scss" scoped>
.pagination {
  //text-align: center;
  //color: #D0B66E;
  display: flex;
  justify-content: center;
  align-items: center;

  .all{
    div {
      margin: 0 .3125rem;
      //background-color: #D0B66E;
      color: #D0B66E;
      outline: none;
      border-radius: .125rem;
      padding: 0 .25rem;
      vertical-align: top;
      display: inline-block;
      font-size: .8125rem;

      min-width: 1.75rem;
      height: 1.75rem;

      line-height: 1.75rem;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;

      // 选择带有disabled属性的所有元素
      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }

      &.active {
        cursor: not-allowed;
        background-color: #D0B66E;
        color: #fff;
        border-radius: 50%;
      }
    }
  }

  .search-input{
    width: 3.125rem;
    height: 1.25rem;
    border: .0625rem solid #D0B66E;
    border-radius: .5rem;
    padding: .3125rem;
    margin-left: .625rem;

    input{
      width: 100%;
      height: 100%;
      text-align: center;
    }
  }

  .tiaozhuan{
    color: #ffffff;
    cursor: pointer;
    font-size: .8125rem;
    margin-left: .625rem;
    background: #D0B66E;
    border-radius: .3125rem;
    width: 3rem;
    height: 1.75rem;
    text-align: center;
    line-height: 1.75rem;
  }


  @media screen and (max-width: 36rem) {

    .all{
      div{
        font-size: .75rem;
        min-width: 1.25rem;
        height: 1.25rem;
        line-height: 1.25rem;
      }
    }

  }


}
</style>